<template>
	<div>
		<cl-crud @load="onLoad">
			<template #slot-top-stats>
				<div class="slot-top__account">
					<div style="margin-bottom: 20px;">
						<el-select
							size="mini"
							filterable
							placeholder="请选择渠道"
							v-model="selects.channel"
							style="margin-right: 10px;width:130px;"
							@change="channelChange"
						>
							<el-option label="全部" value=" "></el-option>
							<el-option :label="item | channelUnit" :value="item" v-for="item in options.channelList" :key="item"></el-option>
						</el-select>
						<el-select
							size="mini"
							filterable
							placeholder="时间筛选"
							v-model="selects.timeType"
							style="margin-right: 10px;width:130px;"
							@change="val => refresh({ timeType: val, page: 1 })"
						>
							<el-option label="创建时间" :value="0"></el-option>
							<el-option label="付款时间" :value="1"></el-option>
							<el-option label="结算时间" :value="2"></el-option>
						</el-select>
						<date-picker
							:date="[params.startTime, params.endTime]"
							@change="
								val => selectTime({ startTime: val[0], endTime: val[1], page: 1 })
							"
							@refresh="selectTime({ startTime: '', endTime: '', page: 1 })"
						></date-picker>
						<div
							class="top-btn"
							:class="TimeIndex == 1 ? 'active' : ''"
							@click="changeTime(1)"
						>
							本月
						</div>
						<div
							class="top-btn"
							:class="TimeIndex == 2 ? 'active' : ''"
							@click="changeTime(2)"
						>
							上月
						</div>
						<div
							class="top-btn"
							:class="TimeIndex == 3 ? 'active' : ''"
							@click="changeTime(3)"
						>
							近三个月
						</div>
						<div
							class="top-btn"
							:class="TimeIndex == 4 ? 'active' : ''"
							@click="changeTime(4)"
						>
							全部
						</div>
					</div>

					<div class="amount-box">
						<div class="amount-box__li" v-for="(item, index) in amount" :key="index">
							<div class="amount-top">
								<div class="amount-top__title">{{ item.title }}</div>
								<img
									class="amount-top__img"
									:src="require(`@/assets/images/icon-service${index + 1}.png`)"
								/>
							</div>
							<div class="amount-money">
								<span v-if="index != 0">￥</span>{{ item.money }}
							</div>
							<div class="amount-num" v-if="item.value">
								<div>{{ item.value }}</div>
								<div class="amount-num__n">{{ item.num }}</div>
							</div>
						</div>
					</div>
				</div>
			</template>

			<template #slot-statuspicker>
				<el-select
					size="mini"
					filterable
					v-model="selects.status"
					placeholder="订单状态"
					style="margin-right: 10px;width:100px;padding-left: 10px;"
					@change="val => refresh({ orderStatus: val, page: 1 })"
				>
					<el-option label="全部订单" value=""></el-option>
					<el-option label="订单结算" :value="3"></el-option>
					<el-option label="订单付款" :value="12"></el-option>
					<el-option label="订单失效" :value="13"></el-option>
					<el-option label="订单成功" :value="14"></el-option>
				</el-select>
				<el-select
					size="mini"
					filterable
					v-model="selects.source"
					placeholder="订单类型"
					style="margin-right: 10px;width:100px;padding-left: 10px;"
					@change="val => refresh({ source: val, page: 1 })"
				>
					<el-option label="全部" value=""></el-option>
					<el-option label="淘宝" :value="0"></el-option>
					<el-option label="京东" :value="1"></el-option>
					<el-option label="拼多多" :value="2"></el-option>
				</el-select>
				<el-select
					size="mini"
					filterable
					v-model="selects.isFree"
					placeholder="是否免单"
					style="margin-right: 10px;width:100px;"
					@change="val => refresh({ isFree: val, page: 1 })"
				>
					<el-option label="全部" value=" "></el-option>
					<el-option label="未检测 " :value="0"></el-option>
					<el-option label="是" :value="1"></el-option>
					<el-option label="否" :value="2"></el-option>
				</el-select>
				<el-select
					size="mini"
					filterable
					v-model="selects.isTLJ"
					placeholder="订单活动类型"
					style="margin-right: 10px;width:120px;"
					@change="val => refresh({ orderType: val, page: 1 })"
				>
					<el-option label="全部" value=" "></el-option>
					<el-option label="未检测 " :value="'-1'"></el-option>
					<el-option label="非活动" :value="0"></el-option>
					<el-option label="免单" :value="1"></el-option>
					<el-option label="限时抢购" :value="2"></el-option>
					<el-option label="新人专享" :value="3"></el-option>
					<el-option label="百万补贴" :value="4"></el-option>
					<el-option label="首单补贴" :value="5"></el-option>
					<el-option label="社群淘礼金" :value="6"></el-option>
				</el-select>
			</template>
			<template #slot-datepicker>
				<div class="Filter">
					<el-select
						size="mini"
						filterable
						placeholder="时间筛选"
						v-model="selects.timeType"
						style="margin-right: 10px;width:100px;"
						@change="val => refresh({ timeType: val, page: 1 })"
					>
						<el-option label="创建时间" :value="0"></el-option>
						<el-option label="付款时间" :value="1"></el-option>
						<el-option label="结算时间" :value="2"></el-option>
					</el-select>
					<el-button type="primary" style="margin-left:10px" size="mini" @click="orderExport">
						<i class="el-icon-download"></i>导出报表
					</el-button>
				</div>
			</template>
			<template #table-column-goodInfo="{scope}">
				<goodInfo :item="scope.row"></goodInfo>
			</template>
			<template #table-column-orderCreateTime="{scope}">
				{{ scope.row.orderCreateTime | format_date }}
			</template>
			<template #table-column-orderEarningTime="{scope}">
				{{ scope.row.orderEarningTime | format_date }}
			</template>

			<template #table-column-status="{scope}">
				{{ scope.row.orderStatus | order_status }}
			</template>
			<template #table-column-isFree="{scope}">
				<div>
					<el-tag type="info" v-if="scope.row.isFree == 0">未检测</el-tag>
					<el-tag v-else-if="scope.row.isFree == 1" type="success">是</el-tag>
					<el-tag type="info" v-else-if="scope.row.isFree == 2">否</el-tag>
				</div>
			</template>
			<template #table-column-orderType="{scope}">
				<div>
					<el-tag type="info" v-if="scope.row.orderType == '-1'">未检测</el-tag>
					<el-tag v-if="scope.row.orderType == 0" type="info">非活动</el-tag>
					<el-tag v-if="scope.row.orderType == 1">免单</el-tag>
					<el-tag v-if="scope.row.orderType == 2" type="success">限时抢购</el-tag>
					<el-tag v-if="scope.row.orderType == 3">新人专享</el-tag>
					<el-tag v-if="scope.row.orderType == 4">百万补贴</el-tag>
					<el-tag v-if="scope.row.orderType == 5">首单补贴</el-tag>
					<el-tag v-if="scope.row.orderType == 6">社群淘礼金</el-tag>
				</div>
			</template>
			<template #table-column-proportion="{scope}">
				<div>
					{{ scope.row.orderCommissionRate }} /
					<span class="tips"
					>{{ scope.row.settleRate.toString().split('.')[1] || 0 }}%</span
					>
				</div>
			</template>
			<template #table-column-commission="{scope}">
				<div>
					{{ scope.row.orderCommissionTotal }} /
					<span class="tips">{{ scope.row.orderCommission || 0 }}</span>
				</div>
			</template>

			<!-- 淘礼金↓ -->
			<template #table-column-taoMoney="{scope}">
				<div>
					{{ scope.row.tljMoney || 0 }}
				</div>
			</template>
		</cl-crud>
	</div>
</template>

<script>
import DatePicker from '@/components/common/date-picker2';
import moment from 'moment';
import goodInfo from '../statisticalForm/components/orderList/goods-info';
import { download } from '@/utils/index';

export default {
	data() {
		return {
			options: {
				mainList: [],
				channelList: []
			},
			selects: {
				channel: '',
				account: '',
				timeType: 0,
				isFree: '',
				isTLJ: '',
				status: '',
				source: null
			},
			amount: [
				{
					title: '淘宝联盟账号',
					money: '全部'
				},
				{
					title: '总有效佣金',
					money: 0,
					value: '总单数',
					num: '0'
				},
				{
					title: '总返利佣金(给用户的部分)',
					money: 0,
					value: '总单数',
					num: '0'
				},
				{
					title: '支付宝支出金额',
					money: '0',
					value: '备注',
					num: '从支付宝打款给用户的总金额'
				}
			],
			params: {
				startTime: moment()
					.startOf('month')
					.format('YYYY-MM-DD 00:00:00'),
				endTime: moment().format('YYYY-MM-DD 23:59:59'),
				page: 1,
				size: 20,
			},
			TimeIndex: 1
		};
	},
	components: {
		DatePicker,
		goodInfo
	},
	created() {
		// 获取联盟号
		this.$service.userMenagement.relation.mainList().then(res => {
			this.options.mainList = res
		});

		// 获取渠道
		this.$service.userMenagement.relation.channelList().then(res => {
			this.options.channelList = res;
		});
	},
	mounted() {},

	methods: {
		onLoad({ ctx, app }) {
			this.crud = app;
			ctx.service(this.$service.statisticalForm.orderList)

				.set('table', {
					columns: [
						{
							label: '序号',
							type: 'index',
							align: 'center',
							width: 80
						},
						{
							label: '用户名',
							prop: 'nickName',
							align: 'center'
						},
						{
							label: '手机号',
							prop: 'phone',
							align: 'center'
						},
						{
							label: '商品信息',
							prop: 'goodInfo',
							align: 'center',
							width: '550px'
						},
						{
							label: '订单状态',
							prop: 'status',
							align: 'center'
						},
						{
							label: '创建时间',
							prop: 'orderCreateTime',
							align: 'center',
							sortable: 'custom',
							'min-width': 150
						},
						{
							label: '结算时间',
							prop: 'orderEarningTime',
							align: 'center',
							sortable: 'custom',
							'min-width': 150
						},
						{
							label: '佣金比例/返利比例',
							prop: 'proportion',
							align: 'center',
							'min-width': 150
						},
						{
							label: '佣金',
							prop: 'orderCommissionTotal',
							align: 'center',
							sortable: 'custom'
						},
						{
							label: '返利佣金',
							prop: 'orderCommission',
							align: 'center',
							sortable: 'custom',
							'min-width': 150
						},
						{
							label: '礼金',
							prop: 'tljMoney',
							align: 'center',
							sortable: 'custom',
							'min-width': 150
						},
						{
							label: '是否免单',
							prop: 'isFree',
							align: 'center'
						},
						{
							label: '订单活动类型',
							prop: 'orderType',
							align: 'center',
							'min-width': 150
						},
						{
							label: '订单编号',
							prop: 'tradeId',
							align: 'center'
						}
					],

					op: {
						visible: false
					},
					props: {
						'default-sort': {
							prop: 'orderCreateTime',
							order: 'descending'
						}
					}
				})
				.on('refresh', async (params, { next }) => {
					const { subData } = await next(params);
					if (subData) {
						this.amount[1].money =
							(subData.validCommissionTotal + subData.invalidCommission).toFixed(2);
						this.amount[1].num = subData.validOrderNum + subData.invalidOrderNum;
						this.amount[2].money = subData.validCommission;
						this.amount[2].num = subData.validOrderNum;
						this.amount[3].money = subData.withdraw || 0;
					}
				})
				.set('layout', [
					['slot-top-stats'],
					['refresh-btn', 'slot-statuspicker', 'slot-datepicker', 'flex1', 'search-key'],
					['data-table'],
					['flex1', 'pagination']
				])

				.done();

			app.refresh({
				prop: 'orderCreateTime',
				order: 'desc',
				startTime: moment().startOf('month').format('YYYY-MM-DD 00:00:00'),
				endTime: moment().format('YYYY-MM-DD 23:59:59')
			});
		},
		refresh(params) {
			this.crud.refresh(params);
		},
		selectTime(params) {
			this.params = Object.assign(this.params, params);
			this.refresh(this.params);
		},
		changeTime(i) {
			var start = '';
			var end = '';
			this.TimeIndex = i;
			switch (i) {
				case 1:
					start = moment()
						.startOf('month')
						.format('YYYY-MM-DD 00:00:00');
					end = moment().format('YYYY-MM-DD 23:59:59');
					break;
				case 2:
					start = moment()
						.month(moment().month() - 1)
						.startOf('month')
						.format('YYYY-MM-DD 00:00:00');
					end = moment()
						.month(moment().month() - 1)
						.endOf('month')
						.format('YYYY-MM-DD 23:59:59');
					break;
				case 3:
					start = moment()
						.subtract(3, 'month')
						.format('YYYY-MM-DD 00:00:00');
					end = moment().format('YYYY-MM-DD 23:59:59');
					break;
				case 4:
					start = '';
					end = '';
					break;
			}
			this.params.startTime = start;
			this.params.endTime = end;
			this.refresh(this.params);
		},
		channelChange(val) {
			if (val === ' ') {
				this.refresh({
					adzoneId: null,
					channel: null
				})
				this.params.adzoneId = null;
				this.params.channel = null;
				return false;
			}
			this.$service.userMenagement.relation.mainList({
				channel: val
			}).then(res => {
				this.options.mainList = res;
				this.amount[0].money = res.account;
				this.refresh({
					adzoneId: res.adzoneId,
					channel: val
				})
				this.params.adzoneId = res.adzoneId;
				this.params.channel = val;
			});
			// if (val === ' ') {
			// 	this.amount[0].money = '全部';
			// 	this.refresh({
			// 		adzoneId: null,
			// 		channel: null
			// 	})
			// }
			// this.options.mainList.forEach(item => {
			// 	if (item.adzoneId === val) {
			// 		this.amount[0].money = item.account;
			// 		this.refresh({
			// 			adzoneId: val
			// 		})
			// 	}
			// });
		},
		orderExport() {
			this.$service.statisticalForm.orderList
					.export({
						...this.params,
						sort: 'desc',
						order: 'orderCreateTime'
					})
					.then(res => {
						download({
							data: res,
							fileName: `订单列表-${moment().format('YYYY-MM-DD HH:mm:ss')}`
						});
					})
					.catch(err => {
						this.$message.error(err);
					});
		},
	},
	filters: {
		channelUnit(val) {
			switch (val) {
				case 'drsj1':
					return '多肉商家1';
				case 'dryc':
					return '多肉云仓';
				case 'dryh':
					return '多肉用户';
				case 'dymkf':
					return '抖音麦克风';
				case 'other':
					return '自然流量';
				case 'ycfs':
					return '云仓粉丝';
				case 'rwll':
					return '任务流量';
				case 'xiaomi':
					return '小米';
				case 'vivo':
					return 'VIVO';
				case 'oppo':
					return 'OPPO';
				case 'huawei':
					return '华为';
				case 'yyb':
					return '应用宝';
				case 'douyin':
					return '抖音';
				case 'guanwang':
					return '官网';
				case 'ios':
					return 'AppStore';
				case 'kmi':
					return 'K米';
			}
		}
	}
};
</script>
<style lang="scss" scoped>
.slot-top__account {
	width: 100%;
	height: 220px;
	background: #f7f7f7;
	padding: 20px 0;
}

.top-btn {
	display: inline-block;
	border: 1px solid #d9d9d9;
	border-radius: 4px;
	font-size: 14px;
	color: #595959;
	background: #ffffff;
	padding: 3px 25px;
	margin-left: 8px;
	cursor: pointer;
	&.active {
		border-color: #b3d8ff;
		color: #409eff;
	}
}
.amount-box {
	display: flex;
	justify-content: space-between;
}
.amount-box__li {
	flex: 1;
	margin: 0 10px;
	height: 154px;
	border-radius: 8px;
	background: #ffffff;
	padding: 14px 21px 13px 24px;
	.amount-top {
		display: flex;
		align-items: center;
		justify-content: space-between;
		&__title {
			color: #8c8c8c;
			font-size: 14px;
		}
		&__img {
			width: 35px;
			height: 35px;
			border-radius: 50%;
		}
	}
	.amount-money {
		font-size: 30px;
		border-bottom: 1px solid #e8e8e8;
		padding-bottom: 17px;
		margin-top: 10px;
	}
	.amount-num {
		color: #575757;
		font-size: 14px;
		display: flex;
		align-items: center;
		margin-top: 11px;
		.amount-num__n {
			margin-left: 7px;
		}
	}
}
.amount-box__li:nth-child(1) .amount-money {
	color: #f02b2b;
}
.amount-box__li:nth-child(2) .amount-money {
	color: #cb38ac;
}
.amount-box__li:nth-child(3) .amount-money {
	color: #ffbd04;
}
.amount-box__li:nth-child(4) .amount-money {
	color: #0184fe;
}
.tips {
	color: #f14d27;
}
</style>
